<template>
    <div class="app-container">
        <right-toolbar showSearch.sync="true" @queryTable="getList"></right-toolbar>
        <el-table v-loading="loading" :data="ex_recordList">
            <el-table-column label="考试名称" align="center" prop="exam.name"/>
            <el-table-column label="预约考试时间" align="center" prop="appointDate">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.appointDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="总题数" align="center" prop="exam.questionCount" width="70"/>
            <el-table-column label="对题数" align="center" prop="rightCount" width="70"/>
            <el-table-column label="得分" align="center" prop="score" width="70">
                <template slot-scope="scope">
                    <span v-html="scoreFormat(scope.row.score)"></span>
                </template>
            </el-table-column>
            <el-table-column label="答题用时" align="center" prop="answerTime" :formatter="second_format"/>
            <el-table-column label="开始时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="endTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" width="90">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.ex_exam_record_status_dict" :value="scope.row.status"/>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '1'">
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ex:ex_record:remove']">取消预约</el-button>
                        <el-button v-if="isToday(scope.row.appointDate)" size="mini" type="text" icon="el-icon-edit" @click="doExam(scope.row)">开始考试</el-button>
                    </span>
                    <span v-else-if="scope.row.status == '2'">
                        <el-button v-if="isToday(scope.row.appointDate)" size="mini" type="text" icon="el-icon-edit-outline" @click="doExam(scope.row)">继续考试</el-button>
                    </span>
                    <span v-else-if="scope.row.status == '3'">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="checkExam(scope.row)">查看试卷</el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

    </div>
</template>

<script>
import {listEx_record_my, delEx_record} from "@/api/ex/ex_record";
import {secondFormat,isToday} from "@/utils/zzDouUtils/dateUtil";

export default {
    name: "Ex_record",
    dicts: ['ex_exam_record_status_dict'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 考试记录表格数据
            ex_recordList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 30,
                userId: null,
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        isToday,
        second_format(row, column,cellValue) {
            return secondFormat(cellValue);
        },
        /** 查询考试记录列表 */
        getList() {
            this.loading = true;
            listEx_record_my(this.queryParams).then(response => {
                this.ex_recordList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认取消【' + row.exam.name + '】的考试？').then(function () {
                return delEx_record(ids);
            }).then(() => {
                this.getList();
                this.$emit("resetList");
                this.$modal.msgSuccess("取消成功");
            }).catch(() => {
            });
        },
        /** 格式化分数 */
        scoreFormat(cellValue){
            if (cellValue === null){
                cellValue = 0;
            }
            let color = (cellValue >= 80) ? '#67C23A' : (cellValue < 80 && cellValue >= 50) ? '#E6A23C' : '#F56C6C';
            return `<span style="color: ${color};font-size: 18px;font-weight: bold;">${cellValue}</span>`
        },
        /** 参加考试 */
        doExam(row){
            this.$tab.openPage(row.exam.name, '/ex/do/index.vue/'+ row.id +'/' + 1, {});
        },
        /** 查看试卷 */
        checkExam(row){
            this.$tab.openPage(row.exam.name, '/ex/check/index.vue/'+ row.id +'/' + 1, {});
        }
    }
};
</script>
